<template>
<div>
  <!--    面包屑导航区域-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>个人信息</el-breadcrumb-item>
    <el-breadcrumb-item>修改密码</el-breadcrumb-item>
  </el-breadcrumb>
  <div>
    <el-card>
<!--      用户个人信息-->
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      &nbsp;
      <el-tag> 用户个人信息</el-tag>
      <el-table
        :show-header="false"
        :data="this.IsRole ? tableData : TechtableData"
        :span-method="objectSpanMethod"
        border
        :cell-style="columnStyle"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column width="115%" prop="name"></el-table-column>
        <el-table-column prop="msg"></el-table-column>
      </el-table>
<!--      修改密码-->
      <br>
      <el-button type="primary" @click="showEditDialog()">修改密码</el-button>
    </el-card>
<!--    修改密码的对话框-->
    <el-dialog
      title="修改个人密码"
      :visible.sync="editDialogVisible"
      width="50%" @close="editDialogClosed">
<!--      内容主体区域-->
      <el-form :model="editForm" status-icon :rules="editFormRules" ref="editFormRef" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="原密码" prop="password">
          <el-input type="password" show-password placeholder="请输入原密码" v-model="editForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpass">
          <el-input type="password" show-password placeholder="请设置新密码" v-model="editForm.newpass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" show-password @keyup.enter.native="editPwds" placeholder="请确认新密码" v-model="editForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
<!--      底部区域-->
      <span slot="footer" class="dialog-footer">
    <el-button @click="resetEdit">重置修改</el-button>
    <el-button type="primary" @click="editPwds">确定修改</el-button>
  </span>
    </el-dialog>

  </div>
</div>
</template>

<script>
export default {
  name: 'Userinfo.vue',
  data () {
    // 密码校验
    var Pass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        callback()
      }
    }
    var prePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入原密码'))
      } else {
        callback()
      }
    }
    var Pass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.editForm.newpass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      Userinfo: {
        username: '',
        name: '',
        teachName: ''
      },
      // 查询到的用户信息
      editForm: {
        username: localStorage.getItem('username'),
        password: '',
        newpass: '',
        checkPass: ''
      },
      editFormRules: {
        newpass: [
          { require: true, message: '新密码不能为空', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度不少于6位', trigger: 'blur' },
          { validator: Pass, trigger: 'blur' }
        ],
        password: [
          { require: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度不少于6位', trigger: 'blur' },
          { validator: prePass, trigger: 'blur' }
        ],
        checkPass: [
          { require: true, message: '确认新密码不能为空', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度不少于6位', trigger: 'blur' },
          { validator: Pass2, trigger: 'blur' }
        ]
      },
      // 控制修改密码对话框的显示与隐藏
      editDialogVisible: false,
      IsRole: true
    }
  },
  created () {
    this.getUserinfo()
  },
  computed: {
    tableData () {
      return [
        {
          name: '学生学号',
          msg: this.Userinfo.username
        },
        {
          name: '学生姓名',
          msg: this.Userinfo.name
        },
        {
          name: '授课老师',
          msg: this.Userinfo.teachName
        }
      ]
    },
    TechtableData () {
      return [
        {
          name: '用户名',
          msg: this.Userinfo.username
        },
        {
          name: '姓名',
          msg: this.Userinfo.name
        }
      ]
    }
  },

  methods: {
    // 重置修改密码输入框
    resetEdit () {
      this.$refs.editFormRef.resetFields()
    },
    async getUserinfo () {
      if (localStorage.getItem('role') === 'student') {
        const { data: res } = await this.$http.get('/student/allTestSet/' + localStorage.getItem('username'))
        // console.log(res)
        // if (res.status !== 200) return this.$message.error(res.msg)
        this.Userinfo.username = res.data.info.username
        this.Userinfo.name = res.data.info.name
        this.Userinfo.teachName = res.data.set.teachName
      } else {
        this.Userinfo.username = localStorage.getItem('username')
        this.Userinfo.name = localStorage.getItem('name')
        if (!this.Userinfo.name) {
          this.Userinfo.name = '管理员(默认)'
        }
        this.IsRole = false
      }
    },
    // 自定义列背景色
    columnStyle ({  columnIndex }) {
      if (columnIndex === 0) {
        return 'background:#f3f6fc;'
      } else {
        return 'background:#ffffff;'
      }
    },
    // 和并列  objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
    objectSpanMethod ({  columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    },
    // 展示修改密码对话框
    showEditDialog () {
      this.editDialogVisible = true
    },
    // 监听修改密码对话框的关闭事件
    editDialogClosed () {
      this.$refs.editFormRef.resetFields()
    },
    // 点击按钮，修改用户信息
    editPwds () {
      this.$refs.editFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        const { data: res } = await this.$http.put('/user/updatePwd/', {
          username: this.editForm.username,
          password: this.editForm.password,
          newpass: this.editForm.newpass
        })
        if (res.status !== 200) {
          return this.$message.error('原密码输入错误!')
        }
        this.$message.success('更新用户密码成功！')
        this.editDialogVisible = false
      })
    }
  }
}
</script>

<style scoped>

</style>
